<template>
  <div class="color">
    <color-picker v-model:pureColor="pureColor" v-model:gradientColor="gradientColor" format="hex" isWidget @pureColorChange="onColorChange"/>
  </div>
</template>

<script setup lang="ts">
import {inject, ref} from "vue";
import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";

const state: any = inject<any>('state')
const {onColorPickerChange} = state
const pureColor = ref("rgb(66, 165, 246)");
const gradientColor = ref("linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)");

const onColorChange = (item:any)=> {
  onColorPickerChange(item)
}
</script>

<style lang="scss" scoped>
.color {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>